<template>
    <div class="wrapper">
        <minbar title="购物车" :isPadding="true"></minbar>
        <!-- 结算按钮 -->
        <div class="x-tab padding-lr">
            <div class="x-flex">
                <text class="x-tabfont">商家自营</text>
            </div>
            <text class="x-tabfont">结算</text>
            <text class="x-tabicon iconfont">&#xe628;</text>
        </div>
        <list show-scrollbar="flase" class="x-scroller">
            <refresh class="refresh"  @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <cell>
                <!-- 商品详细 -->
                <x-shoppage :listData="pageData"> </x-shoppage>
            </cell>
        </list>
    </div>   
</template>

<script>
import asCore from "../../common/js/core";
export default {
    components:{
        "minbar" : require("../../common/component/minbar.vue"),
        "x-shoppage" : require("./comp/shoppage.vue"),
    }, 
    data () {
        return {
            refreshing:false,
            pageData:[]
        }
    },
    created() {
        this.onrefresh();
    },
    methods:{
       onrefresh(){
            this.refreshing = true;
            this.getCarData(()=>{
                this.refreshing = false;
            });
       },
       getCarData(callback){
          asCore.post("/member/cart/detail",{},(data,msg,flag)=>{
            if(flag==true){
                var pData = data;
                for(var i=0;i<pData.length;i++){
                    pData[i].selectall = false;
                    for(var j=0;j<pData[i]['goods'].length;j++){
                        pData[i]['goods'][j].select = false;
                    }
                }
                this.pageData = pData;
            }
            callback && callback();
          });
       }
       
    }
}
</script>
<style scoped>
.wrapper{
    position: absolute;
    top:0px;
    bottom: 0;
    left: 0;
    right: 0;
}
.iconfont{
    font-family: iconfont;
}
.x-flex {
    flex: 1;
}
.padding-lr {
    padding-left: 25px;
    padding-right: 25px;
}
.x-tab {
    height: 100px;
    border-bottom-width:1px;
    border-bottom-color: #e0e0e2;
    flex-direction: row;
    background-color: #fff;
    align-items: center;
    justify-content: center;
}
.x-tab:active {
    background-color: #eee;
}
.x-tabfont {
    color: #1e1d23;
    font-size:34px;
}
.x-tabicon {
    top:3px;
    color: #1e1d23;
    font-size:36px;
    padding-left: 5px;
}
.x-scroller {
  position: absolute;
  top: 230px;
  left: 0;
  right: 0;
  bottom: 0;
}
/*刷新加载更多类的样式*/
.refresh {
  width: 750;
  display: flex;
  align-items: center;
}
.indicator {
  margin-top: 30px;
  margin-bottom: 20px;
  height: 70px;
  width: 70px;
  color: #ce2020;
}
.indicator-text {
  color: #888;
  font-size: 30px;
  text-align: center;
}
</style>